<template>
  <div>
    <el-card shadow="hover">
      <el-col :span="24" style="margin-bottom: 10px">
        <el-button type="primary" @click="addModule">新增模块</el-button>
      </el-col>
      <div>
        <TreeTable
          :selectable="false"
          :expand-type="false"
          :selection-type="false"
          border
          :maxHeight="800"
          :data="categoriesdata"
          :columns="columns"
        >
          <template slot="icon" slot-scope="scope">
            <div style="display: flex; justify-content: center">
              <i :class="scope.row.icon" style="font-size: 16px"></i>
            </div>
          </template>
          <template slot="opt" slot-scope="scope">
            <el-button type="primary" @click="addFn(scope)">新增</el-button>
            <el-button type="primary" @click="updateFn(scope)">
              修改
            </el-button>
            <el-button
              @click="deleFn(scope.row)"
              type="danger"
              :disabled="scope.row.children && scope.row.children.length > 0"
            >
              删除
            </el-button>
          </template>
        </TreeTable>
      </div></el-card
    >

    <el-dialog
      @close="closeFn"
      center
      width="800px"
      :title="title"
      :close-on-click-modal="false"
      :visible.sync="addDialog"
    >
      <el-form ref="formItem" :model="formItem" label-width="100px"
        ><el-row :gutter="10">
          <el-col :span="12" v-for="(item, i) in list" :key="i"
            ><el-form-item
              :prop="item.prop"
              :rules="item.rules"
              :label="item.label + ':'"
            >
              <el-input
                @focus="getIcon"
                readonly
                v-if="item.prop === 'icon'"
                :placeholder="item.placeholder"
                v-model="formItem[item.prop]"
              ></el-input>
              <el-input
                v-else
                :disabled="item.prop === 'menuId' && dialogType === 2"
                :placeholder="item.placeholder"
                v-model="formItem[item.prop]"
              ></el-input></el-form-item></el-col></el-row
      ></el-form>
      <template #footer>
        <div>
          <el-button type="primary" @click="confirm">确认</el-button>
          <el-button @click="closeFn">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      center
      width="800px"
      title="选择图标"
      :close-on-click-modal="false"
      :visible.sync="iconDialog"
    >
      <div>
        <ul style="display: flex; flex-wrap: wrap; cursor: pointer">
          <li
            @click="setIcon(item)"
            class="icon"
            v-for="(item, i) in iconJson"
            :key="item + '_' + i"
          >
            <div v-if="i === 0">空</div>
            <i v-else :class="item" style="font-size: 25px"></i>
          </li>
        </ul>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TreeTable from "tree-table-vue";
import iconJson from "./icon.json";
import { menuList, addMenu, updateMenu, deleteMenu } from "_my/api/admin";
export default {
  name: "menuConfig",
  components: {
    TreeTable,
  },
  data() {
    return {
      iconJson: iconJson,
      iconDialog: false,
      formItem: {},
      title: "",
      list: [
        {
          label: "菜单编码",
          prop: "menuId",
          placeholder: "请输入菜单编码",
          rules: [],
        },
        {
          label: "菜单名称",
          prop: "menuName",
          placeholder: "请输入菜单名称",
          rules: [
            { required: true, message: "请输入菜单名称", trigger: "blur" },
          ],
        },
        {
          label: "菜单路径",
          placeholder: "请输入菜单路径",
          prop: "menuPath",
          rules: [
            { required: true, message: "请输入菜单路径", trigger: "blur" },
          ],
        },
        {
          label: "菜单图标",
          prop: "icon",
          placeholder: "请输入菜单图标",
          rules: [
            { required: true, message: "请输入菜单图标", trigger: "change" },
          ],
        },
        {
          label: "菜单排序号",
          prop: "menuIndex",
          placeholder: "请输入菜单排序号",
          rules: [
            { required: true, message: "请输入菜单排序号", trigger: "blur" },
          ],
        },
      ],
      addDialog: false,
      categoriesdata: [],
      dialogType: null,
      columns: [
        { title: "菜单编码", key: "menuId", width: "210" },
        {
          headerAlign: "center",
          align: "center",
          title: "图标",
          key: "icon",
          width: "60",
          type: "template",
          template: "icon",
        },
        {
          headerAlign: "center",
          align: "center",
          title: "菜单名称",
          key: "menuName",
          width: "240",
        },
        {
          title: "菜单路径",
          key: "menuPath",
          width: "280",
        },
        {
          headerAlign: "center",
          align: "center",
          title: "操作",
          type: "template",
          template: "opt",
        },
      ],
    };
  },
  methods: {
    setIcon(icon) {
      this.$set(this.formItem, "icon", icon);
      this.iconDialog = false;
    },
    getIcon() {
      this.iconDialog = true;
    },
    deleFn(params) {
      this.$confirm("确定要删除该条数据吗？", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const { mid, menuId } = params;
          const data = { mid, menuId };
          deleteMenu(data).then((res) => {
            if (res.data.code === 201) {
              this.getMenuList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    confirm() {
      this.$refs["formItem"].validate((valid) => {
        if (valid) {
          if (this.title === "新增模块" || this.title === "新增菜单") {
            addMenu(this.formItem).then((res) => {
              if (res.data.code === 201) {
                this.closeFn();
                this.getMenuList();
              }
            });
          } else {
            updateMenu(this.formItem).then((res) => {
              if (res.data.code === 201) {
                this.closeFn();
                this.getMenuList();
              }
            });
          }
        } else {
          this.$message({
            type: "error",
            message: "请完成必填项",
          });
        }
      });
    },
    closeFn() {
      this.$refs["formItem"].resetFields();
      this.addDialog = false;
      this.formItem = {};
    },
    addModule() {
      this.title = "新增模块";
      this.list[0].rules = [
        {
          required: true,
          message: "菜单编码必须是3位数",
          pattern: /^\d{3}$/,
          trigger: "blur",
        },
      ];
      this.formItem.menuPid = "";
      this.dialogType = 0;
      this.addDialog = true;
    },
    addFn(scope) {
      this.title = "新增菜单";
      this.addDialog = true;
      this.dialogType = 1;
      this.formItem = scope.row;
      this.formItem.menuPid = scope.row.menuId;
      var reg = new RegExp("^" + scope.row.menuId + "\\d{3}$");
      this.list[0].rules = [
        {
          required: true,
          message: "菜单编码必须是上级排序号+3位新编码！", //密码长度8至16位，必须符合由数字,大写字母,小写字母,特殊符,至少其中三种类型！(例:1234@abc)
          trigger: "blur",
          pattern: reg,
        },
      ];
    },
    updateFn(scope) {
      this.title = "修改菜单";
      this.addDialog = true;
      this.dialogType = 2;
      this.list[0].rules = [
        {
          message: "菜单编码必须是上级排序号+3位新编码！", //密码长度8至16位，必须符合由数字,大写字母,小写字母,特殊符,至少其中三种类型！(例:1234@abc)
          trigger: "blur",
          required: true,
        },
      ];
      this.formItem = scope.row;
    },
    getMenuList() {
      menuList().then((res) => {
        this.categoriesdata = res.data;
      });
    },
  },
  mounted() {
    this.getMenuList();
  },
};
</script>

<style lang="less" scoped>
:deep(.zk-table__cell-inner) {
  padding: 2px 12px;
}
:deep(.zk-table__body-row) {
  height: 28px;
  // user-select: none;
}
:deep(.zk-table__header-row) {
  background: #fafafa;
  user-select: none;
  color: #000;
  height: 36px;
}
* {
  list-style: none;
}
.icon {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ddd;
  margin: 5px;
}
</style>
